<template>
  <div class="">
    <div class="top-bg c-flex-row c-flex-center c-fs28 c-fc-myellow">
      {{from == 1 ? '升级会员' : '充值余额'}}
    </div>
    <div class="c-textAlign-c c-fs20 c-lh c-fc-gray c-pt20 c-pb40 c-bd-b1">
      {{from == 1 ? '会员直接App内购购买' : '充值过后可以进行余额购买'}}
    </div>
    <div class="c-flex-row c-flexw-wrap c-ph52 c-pv30" v-if="from == 0">
      <div class="c-w33 c-ph10 c-pv10 c-fs24" v-for="(item,index) in moneyArray" :key="index">
        <div @click="clickRewordItem(item,0)" :class="curChooseMoney.money == item.money ? 'reword-bg-red c-fc-white':'reword-fc-red'" class="c-w100 c-h c-flex-row c-pv16 c-flex-center c-br6 reword-bd-red">{{item.money}}</div>
      </div>
    </div>
    <div class="c-flex-column" v-else>
      <h3 class="c-fw-n c-fs24 c-ph24 c-pt30" v-show="vipArray.length > 0 && svipArray.length > 0">VIP充值</h3>
      <div class="c-flex-row c-flexw-wrap c-ph52 c-pv30" v-if="vipArray.length > 0">
        <div class="c-w33 c-ph10 c-pv10 c-fs24" v-for="(item,index) in vipArray" :key="index">
          <div @click="clickRewordItem(item,1)" :class="curChooseMoney.money == item.money ? 'reword-bg-red c-fc-white':'reword-fc-red'" class="c-w100 c-h c-flex-row c-pv16 c-flex-center c-br6 reword-bd-red">{{item.money}}{{item.duration == 1 ? '/月' : (item.duration == 3 ? '/季' : (item.duration == 6 ? '/半年' : (item.duration == 12 ? '/年' : (item.duration == 36 ? '/三年' : ''))))}}</div>
        </div>
      </div>
      <h3 class="c-fw-n c-fs24 c-ph24" :class="vipArray.length > 0 ? '' : 'c-pt30'" v-show="svipArray.length > 0 && vipArray.length > 0">SVIP充值</h3>
      <div class="c-flex-row c-flexw-wrap c-ph52 c-pv30" v-if="svipArray.length > 0">
        <div class="c-w33 c-ph10 c-pv10 c-fs24" v-for="(item,index) in svipArray" :key="index">
          <div @click="clickRewordItem(item,2)" :class="curChooseMoney.money == item.money ? 'reword-bg-red c-fc-white':'reword-fc-red'" class="c-w100 c-h c-flex-row c-pv16 c-flex-center c-br6 reword-bd-red">{{item.money}}{{item.duration == 1 ? '/月' : (item.duration == 3 ? '/季' : (item.duration == 6 ? '/半年' : (item.duration == 12 ? '/年' : (item.duration == 36 ? '/三年' : ''))))}}</div>
        </div>
      </div>
    </div>
    <div class="c-ph24 c-flex-row">
      <div @click="showDia" class="c-fs32 c-pv24 c-flex-row c-flex-center c-w0 c-flex-grow1 c-fc-white reword-bg-red">
        {{from == 1 ? '提交' : '充值'}}
      </div>
    </div>
    <div class="c-ph24 c-pt30">
      <h2 class="c-fs24 c-fc-xblack c-mb10">{{from == 1 ? '升级' : '充值'}}说明：</h2>
      <p class="c-fs20 c-fc-xblack c-lh32 c-mb10">1.{{from == 1 ? '升级' : '充值后无使用期限，但'}}<span class="c-fw-b reword-fc-red c-fs24">不可退款，不可提现{{from == 1 ? '' : '，不可用于升级会员'}}</span>。</p>
      <p class="c-fs20 c-fc-xblack c-lh32 c-mb10">2.{{from == 1 ? '升级' : '充值'}}后只能在此iOS App内使用，不可用于其他平台。</p>
      <p class="c-fs20 c-fc-xblack c-lh32 c-mb10">3.使用苹果系统{{from == 1 ? '升级' : '充值'}}可参考 <span class="c-fc-blue c-text-decoration-underline" @click="goIosRechargeInfo()">{{from == 1 ? '升级' : '充值'}}流程说明</span>。</p>
      <p class="c-fs20 c-fc-xblack c-lh32">4.如遇到无法{{from == 1 ? '升级' : '充值'}}，{{from == 1 ? '升级' : '充值'}}失败等问题，可关注此app对应的公众号，解决您的问题。</p>
    </div>

    <div v-transfer-dom>
      <cj-popup v-model="showDialog" class="c-w80">
        <div class="c-fc-sxblack c-textAlign-l c-ph24 c-hh500 c-contexty-scroll">
          <h2 class="c-fw-n c-fs28 c-pt32 c-pb16 c-textAlign-c">用户付费协议</h2>
          <h2 class="c-fw-n c-fs24 c-pv16">第一条 总则</h2>
          <p class="c-fs18 c-lh28 c-mb10">1.为保障用户权益，请用户在付费之前，详细阅读此服务协议（以下简称“本协议”）所有内容。当用户点选“【我已经阅读并同意”，即表示用户同意并承诺遵守本协议。</p>
          <p class="c-fs18 c-lh28 c-mb10">2.收费课程是指在App上有偿提供给用户的视频、音频、文字、图片、答疑等内容及服务。</p>
          <p class="c-fs18 c-lh28">3.已经发布的或将来可能发布的各类规则,均为本协议不可分割的组成部分，与协议正文具有同等法律效力。</p>
          <h2 class="c-fw-n c-fs24 c-pv16">第二条 用户规则</h2>
          <p class="c-fs18 c-lh28 c-mb10">1.用户对以其帐号发生的或通过其帐号发生的一切活动和事件（包括但不限于用户发表的任何内容以及由此产生的任何结果）负全部法律责任。</p>
          <p class="c-fs18 c-lh28 c-mb10">2.用户应保管好自己的帐号和密码，如因用户未保管好自己的帐号和密码而对自己造成损害的，用户将负全部责任。另外，用户应对用户帐号中的所有活动和事件负全责。用户同意若发现有非法使用用户的帐号或出现安全漏洞的情况，立即通告，我们将会尽力予以妥善解决。</p>
          <p class="c-fs18 c-lh28 c-mb10">3.用户理解并同意：app发布的收费课程将采用整体购买的方式，即用户只需购买一次，就可以学习该课程所有已发布的课时。已购买的收费课程，用户可以在学习有效期内重复学习，无需再次付费。收费课程一经购买后，不得申请退款。</p>
          <h2 class="c-fw-n c-fs24 c-pv16">第三条 本协议的修订</h2>
          <p class="c-fs18 c-lh28 c-mb10">此平台有权对本协议进行调整或补充，除非另有明确规定，此平台所推出的新功能和新服务，均无条件的适用本协议。</p>
          <h2 class="c-fw-n c-fs24 c-pv16">第四条 其他约定</h2>
          <p class="c-fs18 c-lh28 c-mb10">1.所有权及知识产权：服务中包含的任何文字、图表、音频、视频（包括但不限于图表、动画、音频、视频、界面、数据和程序、代码、文档）等信息或材料均受著作权法、商标法和/或其它法律法规的保护。非平台书面同意用户不得擅自使用、修改、复制、传播、改变、散布、发行或发表上述内容。如有违反，用户同意承担由此给平台造成的一切损失，并追究其法律责任。</p>
          <p class="c-fs18 c-lh28 c-mb10">2.本协议适用中华人民共和国的法律。当本协议的任何内容与中华人民共和国法律相抵触时，应当以法律规定为准，同时相关内容将按法律规定进行修改或重新解释，而本协议其他部分的法律效力不变。</p>
          <p class="c-fs18 c-lh28 c-mb10">3.本协议自发布之日起实施，并构成用户和平台之间的共识。</p>
          <p class="c-fs18 c-lh28 c-mb10">4.平台不行使、未能及时行使或者未充分行使本协议或者按照法律规定所享有的权利，不应被视为放弃该权利，也不影响平台在将来行使该权利。</p>
          <p class="c-fs18 c-lh28 c-mb10">5.【审慎提醒】 您的注册、登录、使用等行为将视为对本协议的接受，则本协议将立即生效，并构成您和平台之间有约束力的法律文件。</p>
        </div>
        <div @click="goPay()" class="c-pv24 c-textAlign-c">
          <span class="c-fs36 c-fc-deepGreen">同意</span>
        </div>
      </cj-popup>
    </div>

  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js"
import { TransferDomDirective as TransferDom } from 'ckjrweb-mp-ui/src/components/index'

export default {
  name: "IosRecharge",
  directives: {
    TransferDom
  },
  components: {
  },
  data() {
    return {
      //moneyArray: [{ "money": 30, "id": "com.baijia.recharge.1" }, { "money": 50, "id": "com.baijia.recharge.2" }, { "money": 108, "id": "com.baijia.recharge.3" }, { "money": 208, "id": "com.baijia.recharge.4" }, { "money": 308, "id": "com.baijia.recharge.5" }, { "money": 418, "id": "com.baijia.recharge.6" }],
      //vipArray: [{ "money": 388, "id": "com.baijia.recharge.10" }],
      //curChooseMoney: { "money": 30, "id": "com.baijia.recharge.1" },
      moneyArray: [],
      vipArray: [],
      svipArray: [],
      curChooseMoney: null,
      isSubmit: true, //防止多次提交
      showDialog: false,
      from: 0,
      type: 0, //0充值，1vip,2svip
      isYouKe: false,
    };
  },
  created() {
    utilJs.appShare(this);
  },
  methods: {
    goIosRechargeInfo: function () {
      this.$routerGo(this, "push", {
        path: "/homePage/agent/iosRechargeInfo"
      });
    },
    recoverBuy() {
      utilJs.iosRecoverBuy();
    },
    showDia: function () {
      if (this.enableIosRecharge != 1) {
        this.$showCjToast({
          text: "Sorry,暂不支持在iOS系统内充值",
        })
        return;
      }
      if (utilJs.isIOSAnonUser()) {
        this.$cjConfirm({
          title: '友情提醒',
          message: '当前为游客模式，无法进行多端共用，请前往登录',
          cancelButtonText:'直接充值',
          confirmButtonText:'去登陆',
          onConfirm:() => {
            if ((navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1) && window.navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == 'micromessenger' && localStorage.getItem("companyId")) {
              // 把之前的cookie设置过期，防止cookie不停地增加导致http request 400错误
              let exp = new Date();
              exp.setTime(exp.getTime() - 1);
              document.cookie = localStorage.getItem("companyId") + "|token=;expires=" + exp.toGMTString() + ";path=/";
            }
            window.localStorage.clear();
            window.webkit.messageHandlers.iosWechatLoginOut.postMessage('loginOut');
          },
          onCancel:() => {
            this.showDialog = true;
          }
        })
      } else {
        this.showDialog = true;
      }
    },
    goPay: function () {
      this.showDialog = false;
      //先提交订单
      if (this.isSubmit) {
        this.isSubmit = false;

        //let pt = this.from == 1 ? global.ckFrom.iosVipPay : global.ckFrom.iosCharge;
        let pt = this.type == 0 ? global.ckFrom.iosCharge : (this.type == 1 ? global.ckFrom.iosVipPay : global.ckFrom.iosSVipPay);

        let data = {
          prodId: this.curChooseMoney.money,
          payMoney: this.curChooseMoney.money,
          prodType: pt,
          usePoint: 0,
          fromInvite: 0,
          payMethod: 3, //iosapp内购
          fromApp: 'iOS'
        };

        let $this = this;
        if (sessionStorage.getItem('promotedAccountId')) {
          data.promotedAccountId = sessionStorage.getItem('promotedAccountId')
        }
        utilJs.postMethod(global.apiurl + "orders/submitOrder", data, function (
          res
        ) {
          $this.isSubmit = true;
          let orderId = res.orderId;

          //需要让ios调用我的方法
          let data1 = {
            "order_id": orderId,
            "user_id": localStorage.getItem("userId"),
            "product_id": $this.curChooseMoney.id,
            "token": localStorage.getItem("token")
          };

          let sdata = JSON.stringify(data1);
          //ios调用此接口，进行接收参数，跟后台进行交互
          var isiOS = navigator.userAgent.indexOf('IOSLogin') > -1; //ios终端
          var isNewiOS = navigator.userAgent.indexOf('IOSNewLogin') > -1 || navigator.userAgent.indexOf("IOSNewApp") > -1; //ios终端
          if (isiOS) {
            iosAppPay(sdata);// eslint-disable-line
          } else if (isNewiOS) {
            window.webkit.messageHandlers.iosAppPay.postMessage(sdata);
          }
        }, function () {
          $this.isSubmit = true;
        });
      }
    },
    clickRewordItem(item, type) {
      this.curChooseMoney = item;
      this.type = type;
    },
    //手机端分享
    appShare: function () {
      utilJs.appShareTrue("", "", "", "");
    }
  },
  activated() {
    //升级会员跟充值不一样，对于每一个在ios都有相应的配置，属于产品，
    //以后如果要做量产这些都需要后台通过接口进行返回
    this.isYouKe = utilJs.isIOSAnonUser();
    this.from = this.$route.query.from == 1 ? 1 : 0;
    this.type = 0;
    this.showDialog = false;
    let $this = this;
    let getUrl = `${global.apiurl}app/getIAPProducts`;
    utilJs.getMethod(getUrl, function (res) {
      $this.moneyArray = res.moneyArray;
      $this.vipArray = res.vipArray;
      $this.svipArray = res.svipArray;
      $this.enableIosRecharge = res.companyAppConfs && res.companyAppConfs.enableIosRecharge;

      setDocumentTitle($this.from == 1 ? "升级会员" : "充值中心");// eslint-disable-line
      $this.curChooseMoney = $this.from == 1 ? (res.vipArray.length > 0 ? res.vipArray[0] : res.svipArray[0]) : res.moneyArray[0];
      $this.type = $this.from == 1 ? (res.vipArray.length > 0 ? 1 : 2) : 0;
    });
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.reword-bd-red {
  border: 1px solid #fc583d;
}

.reword-fc-red {
  color: #fc583d;
}
.reword-bg-red {
  background-color: #fc583d;
}
.top-bg {
  position: relative;
  width: 100%;
  height: 3.83rem;
  text-align: center;
  line-height: 50px;
}
.top-bg:after {
  width: 100%;
  height: 3.83rem;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  content: "";
  border-radius: 0 0 50% 50%;
  background: linear-gradient(#dd563f, #dd563f);
}
</style>
